<script setup lang="ts">
import { ref } from 'vue'

// 定义接收的属性 - 虽然不需要使用，但为了保持与其他组件一致的接口仍需定义
defineProps<{
  landType: string
}>()
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 表单数据状态定义
const complaintForm = ref({
  是否发生信访: '否',
  信访年份: '',
  信访月份: '',
  信访县: '',
  信访乡: '',
  信访村: '',
  信访人姓名: '',
  信访反映具体内容: '',
  受理自然资源主管部门: '',
  处理具体措施: ''
})

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  paragraph += `〔信访处理〕\n`
  
  if (complaintForm.value.是否发生信访 === "是") {
    paragraph += `${complaintForm.value.信访年份}年${complaintForm.value.信访月份}月，${complaintForm.value.信访县}县${complaintForm.value.信访乡}乡${complaintForm.value.信访村}村村民${complaintForm.value.信访人姓名}来信（访）反映该批次拟占地块${complaintForm.value.信访反映具体内容}。${complaintForm.value.受理自然资源主管部门}进行了认真调查处理，${complaintForm.value.处理具体措施}。目前，信访群众反映的问题已得到妥善解决，信访人表示不再上访。`
  } else {
    paragraph += `该批次用地截至目前未收到相关信访事项。`
  }
  
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">信访情况单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">办公室</p>
      </div>
      
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <p class="text-gray-600">存在的信访问题已妥善解决。</p>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板（常驻显示） -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
      </div>
      
      <div class="p-4">
        <div class="section-block blue">
          <div class="text-gray-700 space-y-3">
            <p>〔信访处理〕</p>
            
            <!-- 用户选择判断区 -->
            <div class="space-y-3">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="complaintForm.是否发生信访" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">是否发生信访：</label>
              </div>
            </div>

            <!-- 用户输入交互区 -->
            <div v-if="complaintForm.是否发生信访 === '是'" >
              <p>
                <InputField v-model="complaintForm.信访年份" type="number" placeholder="年份" width="w-24" />
                年
                <InputField v-model="complaintForm.信访月份" type="number" min="1" max="12" placeholder="月份" width="w-24" />
                月，
                <InputField v-model="complaintForm.信访县" placeholder="县名" width="w-24" />
                县
                <InputField v-model="complaintForm.信访乡" placeholder="乡名" width="w-24" />
                乡
                <InputField v-model="complaintForm.信访村" placeholder="村名" width="w-24" />
                村村民
                <InputField v-model="complaintForm.信访人姓名" placeholder="姓名" width="w-24" />
                来信（访）反映该批次拟占地块
                <InputField v-model="complaintForm.信访反映具体内容" placeholder="反映内容" width="w-full" />
                。
              </p>
              <p>
                <InputField v-model="complaintForm.受理自然资源主管部门" placeholder="受理部门" width="w-full" />
                进行了认真调查处理，
                <InputField v-model="complaintForm.处理具体措施" placeholder="处理措施" width="w-full" />
                。
              </p>
              <p>目前，信访群众反映的问题已得到妥善解决，信访人表示不再上访。</p>
            </div>
            
            <div v-if="complaintForm.是否发生信访 === '否'" >
              <p>该批次用地截至目前未收到相关信访事项。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 复制按钮和显示复制的文本内容 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 组件特定样式保留 */
</style>